<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>PyroScope Monitoring</title>

    <link rel="shortcut icon" href="/static/favicon.ico" />
    <link rel="stylesheet" href="/static/f4/css/normalize.css" />
    <link rel="stylesheet" href="/static/f4/css/foundation.css" />
    <link rel="stylesheet" href="/static/css/style.css" />
    <link rel="stylesheet" href="/static/css/custom.css" /> <!-- user styles -->
    <script src="/static/f4/js/vendor/custom.modernizr.js"></script>
</head>
<body>

    <!-- Header and Nav -->
    <a name="top" />
    <nav class="top-bar">
    <img class="left" src="/static/img/pyroscope.png" width="40" height="40" hspace="5" vspace="3" alt="PyroScope" />
    <ul class="title-area">
        <!-- Title Area -->
        <li class="name">
            <h1>
                <a href="#">
                    <span id="engine_id">Monitoring</span>
                </a>
            </h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>

    <section class="top-bar-section hidden">
      <!-- Left Nav Section -->
      <ul class="left">
        <li class="divider"></li>
        <li class="has-dropdown">
          <a class="active" href="#">Left Menu</a>
          <ul class="dropdown">
            <li><label>Section Name</label></li>
            <li><a href="#" class="">Dropdown Level 1</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li class="divider"></li>
            <li><label>Section Name</label></li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li class="divider"></li>
            <li><a href="#">See all &rarr;</a></li>
          </ul>
        </li>
        <li class="divider"></li>
        <li class="has-dropdown">
          <a href="#">Left Menu 2</a>
          <ul class="dropdown">
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li class="divider"></li>
            <li><a href="#">See all &rarr;</a></li>
          </ul>
        </li>
        <li class="divider"></li>
      </ul>

      <!-- Right Nav Section -->
      <ul class="right">
        <li class="divider"></li>
        <li class="has-dropdown">
          <a href="#">Right Menu</a>
          <ul class="dropdown">
            <li><label>Section Name</label></li>
            <li class="has-dropdown">
              <a href="#" class="">Has Dropdown, Level 1</a>
              <ul class="dropdown">
                <li><a href="#">Dropdown Options</a></li>
                <li><a href="#">Dropdown Options</a></li>
                <li class="has-dropdown">
                  <a href="#">Has Dropdown, Level 2</a>
                  <ul class="dropdown test">
                    <li><a href="#">Subdropdown Option</a></li>
                    <li><a href="#">Subdropdown Option</a></li>
                    <li><a href="#">Subdropdown Option</a></li>
                  </ul>
                </li>
                <li><a href="#">Subdropdown Option</a></li>
                <li><a href="#">Subdropdown Option</a></li>
                <li><a href="#">Subdropdown Option</a></li>
              </ul>
            </li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li class="divider"></li>
            <li><label>Section Name</label></li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li class="divider"></li>
            <li><a href="#">See all &rarr;</a></li>
          </ul>
        </li>
      </ul>
    </section>
    </nav>
    <!-- End Header and Nav -->

    <div class="row">
        <div class="round alert alert-box hidden">
            <span id="error_msg">???</span>
            <a href="#" class="close">&times;</a>
        </div>
    </div>

    <!-- Main Grid Section -->
    <div class="row"><a name="engine" />
        <div class="large-2 small-5 columns">
            <div class="panel">
                <h6><small>rTorrent</small></h6>
                <p class="values">
                    <span class="value" id="rt_version">???</span>
                    /
                    <span class="value" id="lt_version">???</span>
                    <br />⌚ <span class="v-right value" id="engine_uptime">???</span>
                </p>
            </div>
        </div>

        <div class="large-3 small-7 columns">
            <div class="panel">
                <h6><small>▲</small> <span class="value right" id="rtws">???</span></h6>
                <div class="graph">
                    <canvas id="c_rtws" width="150" height="56"></canvas>
                </div>
            </div>
        </div>

        <div class="large-4 small-5 columns push-3">
            <div class="panel">
                <h6><small>Views</small></h6>
                <p class="values">
                    &nbsp;♯&nbsp;<span class="value" id="v_main">???</span> &nbsp;
                    &nbsp;⚡&nbsp;<span class="value" id="v_active">???</span> &nbsp;
                    &nbsp;↯&nbsp;<span class="value" id="v_messages">???</span> &nbsp;
                    &nbsp;✔&nbsp;<span class="value" id="v_complete">???</span> &nbsp;
                    &nbsp;◑&nbsp;<span class="value" id="v_incomplete">???</span> &nbsp;
                    &nbsp;▲&nbsp;<span class="value" id="v_seeding">???</span> &nbsp;
                    &nbsp;▼&nbsp;<span class="value" id="v_leeching">???</span> &nbsp;
                    &nbsp;☀&nbsp;<span class="value" id="v_started">???</span> &nbsp;
                    &nbsp;■&nbsp;<span class="value" id="v_stopped">???</span> &nbsp;
                </p>
            </div>
        </div>

        <div class="large-3 small-7 columns pull-4">
            <div class="panel">
                <h6><small>▼</small> <span class="value right" id="rtrs">???</span></h6>
                <div class="graph">
                    <canvas id="c_rtrs" width="150" height="56"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row"><a name="host" />
        <div class="large-2 small-12 columns">
            <div class="panel">
                <h6><small>Host</small> <span class="right" id="heartbeat">♥</span></h6>
                <p class="values">
                    &nbsp;↯&nbsp;<span class="value" id="errors">???</span>
                    &nbsp;♯&nbsp;<span class="value" id="calls">???</span>
                    &nbsp;⌚&nbsp;<span class="v-right value" id="uptime">???</span>
                </p>
            </div>
        </div>

        <div class="large-3 small-7 columns">
            <div class="panel">
                <h6><small>CPU</small> <span class="value right" id="cpu_usage">???</span></h6>
                <div class="graph">
                    <canvas id="c_cpu_usage" width="150" height="56"></canvas>
                </div>
            </div>
        </div>

        <div class="large-2 small-5 columns push-5">
            <div class="panel">
                <h6><small>⚡ ⌚</small> <span class="value right" id="latency">???</span></h6>
                <div class="graph">
                    <canvas id="c_latency" width="85" height="56"></canvas>
                </div>
            </div>
        </div>

        <div class="large-3 small-7 columns pull-2">
            <div class="panel">
                <h6><small>RAM</small> <span class="value right" id="ram_usage">???</span></h6>
                <div class="graph">
                    <canvas id="c_ram_usage" width="150" height="56"></canvas>
                </div>
            </div>
        </div>

        <div class="large-2 small-5 columns pull-2">
            <div class="panel">
                <h6><small>Swap</small> <span class="value right" id="swap_usage">???</span></h6>
                <div class="graph">
                    <canvas id="c_swap_usage" width="85" height="56"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row"><a name="io" />
        <div class="large-2 small-12 columns">
            <div class="panel">
                <h6><small>Disk</small> <span class="right" id="diskp">???</span></h6>
                <p class="values">
                    &nbsp;◑&nbsp;<span id="disku">???</span>
                    &nbsp;●&nbsp;<span id="diskt">???</span>
                    &nbsp;<b>R</b>&nbsp;<span class="value" id="diskr">???</span>
                    &nbsp;<b>W</b>&nbsp;<span class="value" id="diskw">???</span>
                </p>
            </div>
        </div>          

        <div class="large-2 small-6 columns">
            <div class="panel">
                <h6><small>R</small> <span class="value right" id="diskrs">???</span></h6>
                <div class="graph">
                    <canvas id="c_diskrs" width="85" height="56"></canvas>
                </div>
            </div>
        </div>

        <div class="large-2 small-6 columns">
            <div class="panel">
                <h6><small>W</small> <span class="value right" id="diskws">???</span></h6>
                <div class="graph">
                    <canvas id="c_diskws" width="85" height="56"></canvas>
                </div>
            </div>
        </div>

        <div class="large-2 small-12 columns">
            <div class="panel">
                <h6><small>Network</small></h6>
                <p class="values">
                    &nbsp;▲&nbsp;<span class="value" id="netw">???</span>
                    &nbsp;▼&nbsp;<span class="value" id="netr">???</span>
                </p>
            </div>
        </div>          

        <div class="large-2 small-6 columns">
            <div class="panel">
                <h6><small>▲</small> <span class="value right" id="netws">???</span></h6>
                <div class="graph">
                    <canvas id="c_netws" width="85" height="56"></canvas>
                </div>
            </div>
        </div>

        <div class="large-2 small-6 columns">
            <div class="panel">
                <h6><small>▼</small> <span class="value right" id="netrs">???</span></h6>
                <div class="graph">
                    <canvas id="c_netrs" width="85" height="56"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- End Grid Section -->


    <!-- Footer -->
    <footer class="row">
    <div class="large-12 columns">
      <hr />
      <div class="row">
        <div class="large-6 columns">
          <small>Last updated <span id="last_updated">-/-</span></small>
        </div>
        <div class="large-6 columns">
          <ul class="inline-list right">
            <li><a href="#top">⇧ Top</a></li>
          </ul>
        </div>
      </div>
    </div>
    </footer>


    <!-- *** FOUNDATION BOOTSTRAP *************************************** -->
    <script>
        document.write('<script src=/static/f4/js/vendor/' +
            ('__proto__' in {} ? 'zepto' : 'jquery') +
            '.js><\/script>')
    </script>

    <script src="/static/f4/js/foundation.min.js"></script>
    <!--
    <script src="/static/f4/js/foundation/foundation.js"></script>
    <script src="/static/f4/js/foundation/foundation.alerts.js"></script>
    <script src="/static/f4/js/foundation/foundation.clearing.js"></script>
    <script src="/static/f4/js/foundation/foundation.cookie.js"></script>
    <script src="/static/f4/js/foundation/foundation.dropdown.js"></script>
    <script src="/static/f4/js/foundation/foundation.forms.js"></script>
    <script src="/static/f4/js/foundation/foundation.joyride.js"></script>
    <script src="/static/f4/js/foundation/foundation.magellan.js"></script>
    <script src="/static/f4/js/foundation/foundation.orbit.js"></script>
    <script src="/static/f4/js/foundation/foundation.placeholder.js"></script>
    <script src="/static/f4/js/foundation/foundation.reveal.js"></script>
    <script src="/static/f4/js/foundation/foundation.section.js"></script>
    <script src="/static/f4/js/foundation/foundation.tooltips.js"></script>
    <script src="/static/f4/js/foundation/foundation.topbar.js"></script>
    -->
    <script src="/static/js/smoothie.js"></script>
    <script src="/static/js/charts.js"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>
